<template>
  <div class="ga-number">
    <span class="gaIcon down" @click="down">-</span>
    <span class="num">{{number}}</span>
    <span class="gaIcon up" @click="up">+</span>
  </div>
</template>

<script>
export default {
  props: {
    id: {
      type: Number,
      default: 0
    },
    val: {
      type: Number,
      default: 0
    },
    min: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      number: 0
    }
  },
  created () {
    this.number = this.val
  },
  watch: {
    number (value) {
      this.$emit('on-change', value, this.id)
    },
    val(newValue){
      this.number = newValue
      this.$emit('on-change', newValue, this.id)
    }
  },
  methods: {
    up () {
      this.number++
    },
    down () {
      if (this.number > this.min) {
        this.number--
      }
    }
  }
}
</script>
